<template>
  <div id="resourceManagement">
    <div id="tabelTitle">
      人员列表
    </div>
    <div id="table">
      <avue-crud
        v-model="form"
        :search.sync="searchForm"
        :page.sync="page"
        :data="tableData"
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="getList"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-update="handleUpdate"
        @row-save="handleSave"
        @row-del="rowDel"
        @selection-change="selectionChange"
      >
        <template slot="deptName" slot-scope="scope">
          <span>{{ changeData(scope.row.yjAdminDepts) }}</span>
        </template>
        <template slot="menuLeft" slot-scope="{size}">
          <el-button type="primary" :size="size" @click="rowDel()">删除</el-button>
          <el-button type="primary" :size="size" @click="addData()">增加</el-button>
        </template>
        <template slot="menu" slot-scope="{row,size}">
          <el-button type="primary" :size="size" @click="look(row.adminId)">查看</el-button>
        </template>
      </avue-crud>
    </div>
    <div>
      <el-dialog
        title="人员信息"
        v-if="dialogVisible"
        :visible.sync="dialogVisible"
        width="60%"
      >
        <div>
          <avue-form ref="formForm" v-model="formForm" @reset-change="emptytChange" :option="formOption" @submit="submit">
          </avue-form>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import tableMixins from "@/mixins/tableMixin.vue"

export default {
  name: "personnelList",
  mixins: [tableMixins],
  data() {
    return {
      form: {},
      //访问接口前缀
      url: "yuanjiu.testnew/yj-admin",
      searchForm: {},
      // 表格参数
      tableOption: {
        border: true,
        index: false,
        indexLabel: '序号',
        indexWidth: 50,
        stripe: true,
        align: 'center',
        searchMenuSpan: 8,
        searchLabelWidth: 100,
        calcHeight: 300,
        dialogWidth: 900,
        menuWidth: 200,
        menu: true,
        menuAlign: 'center',
        refreshBtn: false,
        columnBtn: false,
        searchShowBtn: false,
        addBtn: false,
        selection: true,
        rowKey: "id",
        emptyBtn: false,
        editBtn: false,
        viewBtn: false,
        delBtn: false,
        emptyBtnText: "重置",
        editBtnText: "修改",
        maxHeight: 645000,
        searchSize: "medium",
        column: [
          {
            prop: 'adminAccount',
            label: '账号',
            search: true
          },
          {
            prop: 'adminRealName',
            label: '姓名',
            slot: true
          },
          {
            prop: 'phone',
            label: '手机号',
          }
          ,
          {
            prop: 'deptNames',
            label: '部门',
          },

          {
            prop: 'groupRoleNames',
            label: '角色',
          },
          {
            prop: 'adminStatus',
            label: '状态',
            type: 'select',
            props: {
              label: 'name',
              value: 'code'
            },
            dicData: [{
              name: '正常',
              code: 1
            }, {
              name: '禁用',
              code: 2
            }],
          }
        ]
      },
      listUrl: 'pageYjAdmin',
      delUrl: "deleteList",
      updateUrl: "insertOrUpdate",
      delIdList: [],
      //新增修改
      dialogVisible: false,
      formForm: {
        adminStatus: 1,
        yjAdminDepts: [{
          deptId: 999999999
        }],
        yjAdminRoleList: [],
        roleId: []
      },
      formOption: {
        column: [
          {
            label: "账号",
            prop: "adminAccount",
            rules: [{
              required: true,
              message: "请填写账号",
              trigger: "blur"
            }]
          }, {
            label: "密码",
            prop: "adminPassword",
            rules: [{
              required: true,
              message: "请填写密码",
              trigger: "blur"
            }]
          }, {
            label: "姓名",
            prop: "adminRealName",
            rules: [{
              required: true,
              message: "请填写姓名",
              trigger: "blur"
            }]
          }, {
            label: "手机号码",
            prop: "phone",
          },
          {
            prop: 'deptId',
            label: '部门',
            type: 'select',
            dicUrl: '/yuanjiu.testnew/tn-dept/listTnDept',
            dicMethod: 'post',
            props: {
              label: 'deptName',
              value: 'deptId',
              res: 'result'
            },
            multiple: true,
            rules: [{
              required: true,
              message: "请选择部门",
              trigger: "change"
            }]
          }, {
            prop: 'roleId',
            label: '角色',
            type: 'select',
            dicUrl: '/yuanjiu.testnew/yj-role/pageYjRole',
            dicMethod: 'post',
            props: {
              label: 'roleName',
              value: 'roleId',
              res: 'result.records'
            },
            dicQuery: {
              pages: 1000
            },
            multiple: true,
            rules: [{
              required: true,
              message: "请选择角色",
              trigger: "change"
            }],

          },
          {
            label: "状态",
            prop: "adminStatus",
            span: 6,
            type: "radio",
            props: {
              label: 'name',
              value: 'code'
            },
            dicData: [{
              name: '正常',
              code: 1
            }, {
              name: '禁用',
              code: 2
            }],
          },
          {
            label: '水印头像',
            prop: 'adminHeadImage',
            type: 'upload',
            listType: 'picture-img',
            span: 24,
            propsHttp: {
              url: 'result'
            },
            tip: '只能上传jpg/png用户头像，且不超过500kb',
            action: '/yuanjiu/upload/uploadImg'
          }
        ]
      }
    }
  },
  methods: {

    /**
     * 获取列表数据
     */
    getList() {
      this.tableLoading = true;
      let query = {}
      for (let i in this.searchForm) {
        if ( this.searchForm[i].length == 0 &&this.searchForm[i]){
          delete  this.searchForm[i]
        }
      }
      query = Object.assign({}, this.searchForm, this.page,this.search);
      query.current = this.page.currentPage
      query.size = this.page.pageSize
      this.$httpService.post("/" + this.url + "/"+this.listUrl,query).then(res => {
        // console.log('res.recordsres.recordsres.recordsres.records',res.records)
        // res.records.map((x)=>{
        //   console.log(x)
        //   if(x.yjAdminRoleList&&x.yjAdminRoleList.length>0){
        //     x.yjAdminRoleList .forEach((y)=>{
        //       this.tableData.qwer.psuh(y.roleName)
        //     })
        //   }
        // })
        this.tableData = res.records
        this.page.total = res.total;
        this.tableLoading = false
      })
    },



    emptytChange(){
      // console.log('清除 ')
    },
    //勾选获取当前数据ID
    selectionChange(list) {
      // console.log(list)
      this.delIdList = []
      list.forEach((x) => {
        this.delIdList.push(x.adminId)
      })
    },
    changeData(row) {
      // console.log(row)
      let deptName = row && row.length > 0 ? row[0].deptName : '--'
      return deptName;
    },
    /**
     * 删除
     * @param row 行数据
     * @param index 行索引
     */
    rowDel: function (row) {
      this.$confirm('是否确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$httpService.post("/" + this.url + "/" + this.delUrl, this.delIdList).then(res => {
          this.$message.success('删除成功');
          this.getList();
        })
      })
    },
    //新增修改
    look(id) {
      // console.log('id', id)
      this.$httpService.get('/yuanjiu.testnew/yj-admin/getYjAdminById?yj_adminId=' + id).then(res => {
        // console.log('res', res)
        this.formForm = res
        let arr = []
        let arr2 = []
        if (res.yjAdminRoleList && res.yjAdminRoleList.length > 0) {
          res.yjAdminRoleList.forEach((x) => {
            // console.log(x.roleId)
            arr.push(x.roleId)
          })
        }
        if (res.yjAdminDepts && res.yjAdminDepts.length > 0) {
          res.yjAdminDepts.forEach((x) => {
            // console.log(x.deptId)
            arr2.push(x.deptId)
          })
        }
        res['roleId'] = arr
        res['deptId'] = arr2
        this.dialogVisible = true
      })
    },
    addData() {
         this.formForm= {
        adminStatus: 1,
          yjAdminDepts: [{
          deptId: 999999999
        }],
          yjAdminRoleList: [],
          roleId: []
      },
         this.dialogVisible = true
    },
    //提交修改
    submit(form,done) {
      // console.log(' this.formForm.yjAdminDepts[0].deptId', this.formForm)
      let arr = []
      let arr2 = []
      this.formForm.roleId.forEach((v, i) => {
        arr.push({roleId: this.formForm.roleId[i]})
      })
      this.formForm.deptId.forEach((v, i) => {
        arr2.push({deptId: this.formForm.deptId[i]})
      })
      this.formForm.yjAdminRoleList = arr
      this.formForm.yjAdminDepts = arr2
      this.$httpService.post('/yuanjiu.testnew/yj-admin/insertOrUpdate', this.formForm).then(res => {
        this.$message.success('操作成功')
        this.emptytChange()
        done()
        this.getList()
        this.dialogVisible = false
      })
      done()

    }
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>
